<script setup>
import {ref} from 'vue'
import {addMedical_info,addMedical_temp} from "@/api/system/medical_temp";

let userId=localStorage.getItem('userId')
let templateId=ref(0)
let templateName=ref("")
let diagnosis=ref("")
let templatePermission=ref("")
let creationTime=ref("")
let medicalHistoryId=ref(0)
let chiefComplaint=ref("")//主诉
let presentIllnessHistory=ref("")//现病史
let pastMedicalHistory=ref("")//既往史
let personalHistory=ref("")//个人史
let familyHistory=ref("")//家族史
let auxiliaryExamination=ref("")//辅助检查
let treatmentOpinion=ref("")//治疗意见
let remarks=ref("")//备注

const add_temp_btn=function (){
//获取当前时间
  const now = new Date(); // 获取当前时间
   // 调用格式化函数
  creationTime.value = formatDate(now); // 将格式化后的时间赋值给变量
  console.log(creationTime.value)

  let temp_data={
       templateId:templateId.value,
       templateName:templateName.value,
       diagnosis:diagnosis.value,
       templatePermission:templatePermission.value,
       creationTime:creationTime.value,
       adminId:userId,
       medicalHistoryId:medicalHistoryId.value,
  }

let temp_info={
    diagnosis:diagnosis.value,
    chiefComplaint:chiefComplaint.value,
    presentIllnessHistory:presentIllnessHistory.value,
    pastMedicalHistory:pastMedicalHistory.value,
    personalHistory:personalHistory.value,
    familyHistory:familyHistory.value,
    auxiliaryExamination:auxiliaryExamination.value,
    treatmentOpinion:treatmentOpinion.value,
    remarks:remarks.value,
    medicalHistoryId:medicalHistoryId.value,
}
  console.log(temp_data)
  console.log(temp_info)

 //发送请求

  addMedical_temp(temp_data).then(res=>{
    console.log(res)
    if (res.code===200){
      addMedical_info(temp_info).then(resq=>{
        console.log(resq)
        if (resq===1){
          alert("创建成功")
          window.location.href="/system/medical/medical_temp"
        }
      })
    }
  })


  }

const back_window=function (){
  window.location.href="/system/medical/medical_temp"
}




  //获取当前时间
const formatDate = (date) => {
  const year = date.getFullYear(); // 获取年份
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份并补零
  const day = String(date.getDate()).padStart(2, '0'); // 获取日期并补零
  return `${year}-${month}-${day}`; // 按照 yyyy-MM-dd 格式返回
}


</script>

<template>
  <div class="root_box">
    <div class="med_temp">
      <h2>创建模板</h2>
      <div class="temp_top">
        <div class="input-group">
         模板编号:<input type="text" class="input-field" placeholder="请输入模板编号" v-model=templateId>
          模板名称:<input type="text" placeholder="请输入模板名称" class="input-field" v-model="templateName">

          <div class="radio-group">
            <input type="radio" id="private" name="temp" value="私人模板"  v-model="templatePermission">
            <label for="private">私人模板</label>
            <input type="radio" id="public" name="temp" value="公共模板"  v-model="templatePermission">
            <label for="public">公共模板</label>
          </div>
        </div>
      </div>

<!--        <label for="description">模板说明</label>-->
<!--        <input type="text" placeholder="请输入模板描述" class="input-field" style="width: 650px" >-->
      诊断:<input type="text" placeholder="请输入诊断病名" class="input-field" v-model="diagnosis">
       病例信息编号: <input type="text" placeholder="请输入病例编号" class="input-field" style="width: 300px; margin-left: 5px" v-model="medicalHistoryId">
     </div>

        <div class="temp_bottom">
          <h2>创建模板信息</h2>
        <div class="section">

          <div class="input-group">
            <label>诊断*</label>
            <input type="text" class="input-field" placeholder="请输入诊断" v-model="diagnosis">
          </div>
          <div class="input-group">
            <label>主诉*</label>
            <input type="text" class="input-field" placeholder="请输入主诉" v-model="chiefComplaint">
          </div>
          <div class="input-group">
            <label>现病史</label>
            <input type="text" class="input-field" v-model="presentIllnessHistory">
          </div>
          <div class="input-group">
            <label>既往史</label>
            <input type="text" class="input-field" v-model="pastMedicalHistory">
          </div>
          <div class="input-group">
            <label>个人史</label>
            <input type="text" class="input-field"  v-model="personalHistory">
          </div>
          <div class="input-group">
            <label>家族史</label>
            <input type="text" class="input-field" v-model="familyHistory">
          </div>
          <div class="input-group">
            <label>辅助检查</label>
            <input type="text" class="input-field" v-model="auxiliaryExamination">
          </div>
          <div class="input-group">
            <label>治疗意见</label>
            <input type="text" class="input-field" v-model="treatmentOpinion">
          </div>
          <div class="input-group">
            <label>备注</label>
            <input type="text" class="input-field" v-model="remarks">
          </div>
        </div>
      </div>

    <button @click="add_temp_btn">提交</button>
    <button @click="back_window">返回</button>
    </div>

</template>

<style scoped>
.root_box {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  padding: 50px;
}

.med_temp {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.temp_bottom{
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.temp_top {
  width: 100%;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-field {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  height: 30px;
}

.input-field:focus {
  border-color: #6200ea;
}

.radio-group {
  display: flex;
  gap: 10px;
}

.radio-group input[type="radio"] {
  margin-right: 5px;
}

.radio-group label {
  cursor: pointer;
}

.temp_bottom label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}

/* 为每个输入框添加特定的样式 */
.input-field[disabled] {
  background-color: #f9f9f9;
  color: #666;
}

.input-field[placeholder]::placeholder {
  color: #aaa;
}

.section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.section .input-group {
  width: calc(50% - 10px);
}

.section .input-group label {
  white-space: nowrap;
  margin-right: 10px;
}

.section .input-group input[type="text"] {
  flex: 1;
}
</style>